<template>
  <div class="hot-search-list">
    <!-- 标题部分 -->
    <slot name="title">
      <div class="title">本周热搜 TOP5</div>
    </slot>
    <!-- 列表部分 -->
     <slot name="abb">
      <ul>
      <li v-for="(item, index) in hotKeywords" :key="index">
        {{ item.text }}
        <span>{{ item.score }}</span>
      </li>
    </ul>
     </slot>
    
  </div>
</template>

<script>
export default {
  name: 'HotSearchList',
  data() {
    return {
      hotKeywords: [
        { text: '#区块链', score: 96 },
        { text: '#数据挖掘', score: 91 },
        { text: '#无人机', score: 87 },
        { text: '#生命科学', score: 72 },
        { text: '#传感器', score: 60 }
      ],
      
    };
  }
};
</script>

<style scoped>
.hot-search-list {
  width: 300px;
}

.title {
  background-color: #007bff; /* 蓝色背景 */
  color: white;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 10px 10px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  border-bottom: 1px solid #ccc;
  padding: 15px;
  display: flex;
  justify-content: space-between;
}
</style>
